<style>
    /* 新增右对齐容器 */
    .pagination-wrapper {
        display: flex;
        justify-content: flex-end;
        margin: 20px 0;
    }

    /* 优化后的分页样式 */
    .pagination-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 6px;
    }

    .page-item {
        display: inline-flex;
    }

    .page-link,
    .current-page,
    .ellipsis {
        padding: 6px 12px;
        border: 1px solid #e0e0e0; /* 更浅的边框色 */
        border-radius: 4px;
        text-decoration: none;
        color: #333;
        background: white; /* 白色背景 */
        transition: all 0.2s;
        font-family: Arial, sans-serif;
    }

    /* 当前页样式匹配图片 */
    .page-item.active .current-page {
        background: #007bff; /* 品牌蓝色 */
        color: white;
        border-color: #007bff;
    }

    /* 悬停效果优化 */
    .page-link:hover {
        background-color: #f8f9fa; /* 浅灰悬停背景 */
        border-color: #007bff;
    }

    /* 省略号样式调整 */
    .ellipsis {
        border: none;
        color: #666;
        padding: 6px 8px;
    }
</style>


{% if page_obj.paginator.num_pages > 1 %}
    <div class="pagination-wrapper">
        <div class="pagination">
            <ul class="pagination-list">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a href="?page=1" class="page-link">« 首页</a>
                    </li>
                    <li class="page-item">
                        <a href="?page={{ page_obj.previous_page_number }}" class="page-link">‹ 上一页</a>
                    </li>
                {% endif %}

                {% for num in page_obj.paginator.get_elided_page_range %}
                    <li class="page-item {% if num == page_obj.number %}active{% endif %}">
                        {% if num == page_obj.number %}
                            <span class="current-page">{{ num }}</span>
                        {% elif num == paginator.ELLIPSIS %}
                            <span class="ellipsis">...</span>
                        {% else %}
                            <a href="?page={{ num }}" class="page-link">{{ num }}</a>
                        {% endif %}
                    </li>
                {% endfor %}

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a href="?page={{ page_obj.next_page_number }}" class="page-link">下一页 ›</a>
                    </li>
                    <li class="page-item">
                        <a href="?page={{ page_obj.paginator.num_pages }}" class="page-link">末页 »</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
{% endif %}